<template>
  <div class='detail-dialog'>
    <el-dialog  :show-close='false' :visible="value">
        <div class="dialog-content flex-r">
            <div class="dialog-content-logo">
                <img src="~/static/image/g3.jpg" alt="">
            </div>
            <div class="dialog-content-main">
                <div class="dialog-content-main-name">游戏名称</div>
                <div class="dialog-content-main-introduce">游戏介游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍游戏介绍绍</div>
                <div class="dialog-content-main-other flex-r-start">
                    <div class="dialog-content-main-other-title"><span>下载地址：</span></div>
                    <div class="dialog-content-main-other-text">asdjhasjdhakjsdhaksd：asdjhasjdhakjsdhaksd</div>
                </div>
                <div class="dialog-content-main-other flex-r-start">
                    <div class="dialog-content-main-other-title"><span>下载地址:</span></div>
                    <div class="dialog-content-main-other-text">asdjhasjdhakjsdhaksd：asdjhasjdhakjsdhaksd</div>
                </div>
            </div>
        </div>

    </el-dialog>
  </div>
</template>
<script>
export default {
  props: {
    id: Number | String,
    value: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    },
    top: {
      type: String,
      default: '15vh'
    }
    // visible: {
    //   type: Boolean,
    //   default: false
    // },
    // visible: {
    //   type: Boolean,
    //   default: false
    // },
    // visible: {
    //   type: Boolean,
    //   default: false
    // },
    // visible: {
    //   type: Boolean,
    //   default: false
    // },
    // visible: {
    //   type: Boolean,
    //   default: false
    // },
    // visible: {
    //   type: Boolean,
    //   default: false
    // },
    // visible: {
    //   type: Boolean,
    //   default: false
    // },
    // visible: {
    //   type: Boolean,
    //   default: false
    // }

  },
  watch: {
    id (newVal) {
      if (newVal) {
        this.$emit('input', true)
      } else {
        this.$emit('input', false)
      }
    }
  },
  data () {
    return {
      activeIndex: '',
      hoverIndex: ''
    }
  },
  methods: {
    NavSelect (index) {
      this.activeIndex = '/'
      this.$router.push('/')
    },
    NavEnter (index) {
      this.hoverIndex = index
    },
    NavLeave () {
      this.hoverIndex = ''
    }
  },
  created () {
    console.log('c')
    console.log(this.id)
  },
  activated () {
    console.log('a')
    console.log(this.id)
  }
}
</script>

<style lang='scss' scoped>
.dialog {
    &-content {
        min-height:300px;
        color:#fff;
        &-logo {
            flex:1;
            img {
                width: 100%
            }
        }
        &-main {
            height:100%;
            flex:1;
            margin-left: 20px;
          &-name {
            font-size:26px;
            text-align: center;
            padding: 10px;
            font-weight: bold;
          }
          &-introduce {
            font-size: 14px;
            line-height: 1.75em;
            padding: 10px 0;
            border-bottom:2px solid #fff;
          }
          &-other {
            padding: 20px 0;
            border-bottom:2px solid #fff;
            &-title {
              font-weight: bold;
              font-size:16px;
              letter-spacing: 2px;
              flex:1;
            }
            &-text {
              flex:2;
              word-break: break-all;
            }
          }
        }
    }

}

</style>

